<template>
	<view class="improve-info">
		<view class="form-card-box">
			<view class="font-s-16 fw-b">基本信息</view>
			<view class="form-box">
				<view class="flex-between-center">
					<view class="color-666">教育程度</view>
					<view class="value-text">
						<text v-if="isDisabled">{{$common.selectDictLabel(eduOptions, form.educationLevel) || '-'}}</text>
						<fu-picker v-else v-model="form.educationLevel" :options="eduOptions"></fu-picker>
					</view>
				</view>
				<view class="flex-between-center">
					<view class="color-666">婚姻情况</view>
					<view class="value-text">
						<text v-if="isDisabled">{{$common.selectDictLabel(marriageOptions, form.marriageStatus) || '-'}}</text>
						<fu-picker v-else v-model="form.marriageStatus" :options="marriageOptions"></fu-picker>
					</view>
				</view>
				<view class="flex-between-center">
					<view class="color-666">电子邮箱</view>
					<view class="value-text">
						<u-input :disabled="!!isDisabled" v-model="form.email" placeholder="请输入" input-align="right"></u-input>
					</view>
				</view>
				<view class="flex-between-center">
					<view class="color-666">月收入（元）</view>
					<view class="value-text">
						<u-input :disabled="!!isDisabled" v-model="form.monthIncome" type="number" placeholder="请输入" input-align="right"></u-input>
					</view>
				</view>
				<view class="flex-between-center">
					<view class="color-666">工作单位</view>
					<view class="value-text">
						<u-input :disabled="!!isDisabled" v-model="form.workplace" placeholder="请输入" input-align="right"></u-input>
					</view>
				</view>
				<view class="flex-between-center">
					<view class="color-666">家庭地址</view>
					<view class="value-text">
						<u-input :disabled="!!isDisabled" v-model="form.familyAddress" placeholder="请输入" input-align="right"></u-input>
					</view>
				</view>
			</view>
		</view>
		<view class="form-card-box">
			<view class="font-s-16 fw-b">联系人1</view>
			<view class="form-box">
				<view class="flex-between-center">
					<view class="color-666">联系人</view>
					<view class="value-text">
						<u-input :disabled="!!isDisabled" v-model="form.emergencyNameOne" placeholder="请输入" input-align="right"></u-input>
					</view>
				</view>
				<view class="flex-between-center">
					<view class="color-666">联系电话</view>
					<view class="value-text">
						<u-input :disabled="!!isDisabled" v-model="form.emergencyPhoneOne" type="number" placeholder="请输入" input-align="right"></u-input>
					</view>
				</view>
				<view class="flex-between-center">
					<view class="color-666">与您关系</view>
					<view class="value-text">
						<text v-if="isDisabled">{{$common.selectDictLabel(relationshipOptions, form.relationshipOne) || '-'}}</text>
						<fu-picker v-else v-model="form.relationshipOne" :options="relationshipOptions"></fu-picker>
					</view>
				</view>
			</view>
		</view>
		<view class="form-card-box">
			<view class="font-s-16 fw-b">联系人2</view>
			<view class="form-box">
				<view class="flex-between-center">
					<view class="color-666">联系人</view>
					<view class="value-text">
						<u-input :disabled="!!isDisabled" v-model="form.emergencyNameTwo" placeholder="请输入" input-align="right"></u-input>
					</view>
				</view>
				<view class="flex-between-center">
					<view class="color-666">联系电话</view>
					<view class="value-text">
						<u-input :disabled="!!isDisabled" v-model="form.emergencyPhoneTwo" type="number" placeholder="请输入" input-align="right"></u-input>
					</view>
				</view>
				<view class="flex-between-center">
					<view class="color-666">与您关系</view>
					<view class="value-text">
						<text v-if="isDisabled">{{$common.selectDictLabel(relationshipOptions, form.relationshipTwo) || '-'}}</text>
						<fu-picker v-else v-model="form.relationshipTwo" :options="relationshipOptions"></fu-picker>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="form-card-box" style="padding-bottom: 12rpx;">
			<view class="font-s-16 fw-b">个人照片</view>
			<view class="mar-t-20">
				<view class="" v-if="isDisabled">
					<view class="img-box" v-if="form.ownPhoto">
						<view v-for="(item,index) in JSON.parse(form.ownPhoto)" :key="index" class="pic-item">
							<u-image v-if="item" :src="item.url" width="200" height="200" border-radius="8" @click="$common.previewImage(form.ownPhoto,index)"></u-image>
						</view>
					</view>
					<view class="color-999" v-else>未上传</view>
				</view>
				<image-upload v-else v-model="form.ownPhoto"></image-upload>
			</view>
		</view> -->
		<footer-btn v-if="!isDisabled">
			<u-button :disabled="btnDisabled" shape="circle" @click="confirm()" type="primary" :custom-style="{background:'#3385FF',fontSize:'32rpx',fontWeight:'bold',height:'90rpx',letterSpacing: '8rpx'}">确认提交</u-button>
		</footer-btn>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isDisabled: false,
				eduOptions: [],
				marriageOptions: [],
				relationshipOptions: [],
				form: {}
			}
		},
		computed:{
			btnDisabled(){
				return !this.form.educationLevel || !this.form.marriageStatus || !this.form.email || !this.form.monthIncome || !this.form.workplace || !this.form.familyAddress || !this.form.emergencyNameOne || !this.form.emergencyPhoneOne || !this.form.relationshipOne || !this.form.emergencyNameTwo || !this.form.emergencyPhoneTwo || !this.form.relationshipTwo // || !this.form.ownPhoto
			}
		},
		onLoad(e) {
			this.isDisabled = e.disabled
			this.getUserInfo()
			this.getDicts()
		},
		methods: {
			getUserInfo(){
				this.$request({
					url: '/loginUserInfo/getExpandDetail',
					method: 'get',
				}).then(res => {
					this.form = res.data || {}
				})
			},
			getDicts(){
				this.$request({
					url: '/system/dict/data/type/education_level',
					method: 'get'
				}).then(res => {
					this.eduOptions = res.data;
				})
				this.$request({
					url: '/system/dict/data/type/marital_status',
					method: 'get'
				}).then(res => {
					this.marriageOptions = res.data;
				})
				this.$request({
					url: '/system/dict/data/type/relative_type',
					method: 'get'
				}).then(res => {
					this.relationshipOptions = res.data;
				})
			},
			confirm(){
				uni.showLoading({ mask:true })
				this.$request({
					url: '/orderInfo/saveUserInfoExpand',
					method: 'post',
					data: this.form
				}).then(res => {
					this.$u.toast('完善资料提交成功');
					this.$common.handleSuccess()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.improve-info {
		padding: 24rpx 24rpx 2rpx;
		.form-card-box{
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 32rpx 24rpx 0;
			margin-bottom: 24rpx;
			.form-box{
				margin-top: 12rpx;
				>view{
					height: 108rpx;
					&:not(:last-child){
						border-bottom: 2rpx solid #f5f5f5;
					}
				}
			}
		}
		.img-box{
			display: flex;
			flex-wrap: wrap;
			>view{
				margin: 0 24rpx 24rpx 0;
				&:nth-child(3n){
					margin-right: 0;
				}
			}
		}
	}
</style>
